<template>
	<div class="app">
		<div class="toptitle">
			
			<div class="topleft">
				<div class="item"><a href="">首页</a></div>
				<div class="item"><a href="movieList">选电影</a></div>
				<div class="item"><a href="">猜你喜欢</a></div>
				<div class="item"><a href="">智能问答</a></div>
				<div class="user">
					<img class="userlog" src="../assets/user.png"/>
					<div class="userinfo" v-if="islogged">
						<div class="userinfo0">昵称</div>
						<div class="userinfo0">123456789</div>
					</div>
					<div class="userinfo1" v-if="!islogged">
						<div class="userinfo2"><a href="login">登录</a></div>
						<div class="userinfo2">|</div>
						<div class="userinfo2"><a href="register">注册</a></div>
					</div>
				</div>
			</div>
		</div>
		<div class="toppart">
		<div class="infor">
			<div class="pic">
				<img  class="mpic" src="../assets/1.jpg" />
			</div>
			<div class="text">
				<div class="name">
					<b>电影名称</b>
				</div>
				<div>
					<p>导演：</p>
					<p>编剧：</p>
					<p>主演：</p>
					<p>电影类型：</p>
					<p>评分：</p>
					<p>地区：</p>
					<p>语言：</p>
					<p>时长：</p>
				</div>
			</div>
		</div>
		</div>
		<div class="space"></div>
		<div class="command">
			<div class="comtitle">
				<b>评分详情</b>
			</div>
			<div class="line"></div>
		</div>
		<div class="comcont">
			<div class="star">
				<div class="all">
					<div class="allleft" id="allleft">
						6.4
					</div>
					<div class="allright">
						<div class="alltext1">
							<img class="stars" src="../assets/star1.png" />
							<img class="stars" src="../assets/star1.png" />
							<img class="stars" src="../assets/star1.png" />
							<img class="stars" src="../assets/star0.png" />
							<img class="stars" src="../assets/star0.png" />
						</div>
						<div class="alltext2">共100人评价</div>
					</div>
				</div>
				<div class="para" >
					<div class="parali" v-for="n in 5" v-bind:key="n">
						<div class="word">{{n}}星</div>
						<div class="lineblock" :style="{width: persents[n-1]/2+'%'}"></div>
						<div class="persents">{{persents[n-1]}}%</div>
					</div>
				</div>
			</div>
			<div class="mycom">
				<div class="seecom" v-if="!seerecommand" @click="showrecommand()"><a href="#allleft">查看评论</a></div>
				<div class="seecom" v-else @click="showrecommand()"><a href="#allleft">收起评论</a></div>
				<div class="seecom"><a href="recommend">我要评论</a></div>
			</div>
		</div>
		<div class="commandcont" v-if="seerecommand">
			<div class="conttitle">精选评论 · · ·</div>
			<div class="contunit" v-for="(comment,index) in comments" v-bind:key="index" v-show="index<((comments.length<show_recom)?comments.length:show_recom)">
				<div class="line2"></div>
				<div class="contop">
					<div class="nickname">用户昵称</div>
					<img class="stars2" src="../assets/star1.png"/>
					<img class="stars2" src="../assets/star1.png"/>
					<img class="stars2" src="../assets/star1.png"/>
					<img class="stars2" src="../assets/star0.png"/>
					<img class="stars2" src="../assets/star0.png"/>
				</div>
				<div class="conbottom">评论内容</div>
			</div>
			<br />
			<div class="morerecommend" v-if="show_recom<comments.length" @click="getmore()">>查看更多评论···</div>
			<div class="nomorerecommend" v-else>没有更多评论了···</div>
			<br />
		</div>
		
		<br />
		<div class="command">
			<div class="comtitle">
				<b>喜欢这部电影的人也喜欢···</b>
			</div>
			<div class="line"></div>
		</div>
		<div class="maylike">
			<div class="unit" v-for="n in 5" v-bind:key="n">
				<div class="imge">
					<img />
				</div>
				<div class="iname">
					电影名称{{n}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			persents:[8.3,23.1,51.6,14.2,2.8],
			seerecommand:false,
			islogged:false,
			show_recom:5,
			comments:[
				{},{},{},{},{}
			],
		}
	},
	methods:{
		choosemovie:function(){
			this.$router.push({path: '/movieList'});
		},
		showrecommand:function(){
			this.seerecommand=!this.seerecommand;
		},
		getmore:function(){
			this.show_recom+=5;
		},
	},
}
</script>

<style scoped>
.app{
	width: 100%;
/* 	background:url(../assets/back6.jpg) no-repeat;
	background-size: 100% 43%; */
	position: absolute;
	top: 0px;
	left: 0px;
}
.toptitle{
	margin-top: 0px;
	width: 100%;
	height: 50px;
	/* border-radius: 5px 5px 0 0; */
	background-color: #000000;
	text-align: center;
}
.topleft{
	display: inline-block;
	width: 100%;
	height: 100%;
	/* background-color: blanchedalmond; */
}
.item{
	height: 50px;
	/* width: 10%; */
	margin-left: 30px;
	display: inline-block;
	text-align: center;
	line-height: 50px;
	color: aliceblue;
	float: left;
	/* background-color: aquamarine; */
}
.topleft a {
	color: aliceblue;
	text-decoration: none;
}
.topleft a:hover{
	color: #d7d7d7;
}
.user{
	/* width: 130px; */
	height: 50px;
	float: right;
	display: inline-block;
}
.userlog{
	margin-top: 8px;
	height:35px;
	margin-right: 5px;
}
.userinfo{
	display: inline-block;
	float: right;
	margin: 6px;
	font-size: 12px;
	/* padding: 4px; */
	color: #d0d0d0;
}
.userinfo0{
	padding: 2px;
}
.userinfo1{
	display: inline-block;
	float: right;
	margin: 15px;
	font-size: 13px;
	color: #d0d0d0;
}
.userinfo2{
	display: inline-block;
	padding-left: 5px;
}
.toppart{
	margin-top: 0px;
	width: 100%;
	height: 480px;
	background:url(../assets/back6.jpg) no-repeat;
	background-size: 100%;
	padding-top: 1px;
}
.space{
	height: 10px;
	width: 65%;
	margin: auto;
	margin-top: 120px;
	z-index: -1;
	/* background-color: #c4c4c4; */
	/* box-shadow: 0 5px 10px #c4c4c4; */
}
.infor{
	width: 75%;
	height: 480px;
	margin: auto;
	margin-top: 80px;
	text-align: center;
	/* background-color: #f3f3f3; */
	background: url(../assets/back6.png);
	box-shadow: 0 3px 5px #c4c4c4;
	background-size: 100%;
}
.pic{
	width: 40%;
	/* height: 90%; */
	display: inline-block;
	margin-top: 40px;
	margin-left: 30px;
	float: left;
	/* background-color: #FFAA7F; */
}
.text{
	width: 40%;
	/* height: 90%; */
	display: inline-block;
	margin-top: 40px;
	float:left;
	/* background-color: #ffaa00; */
}
.text p {
	text-align: left;
}
.mpic{
	width: 250px;
	margin-top: 10px;
}
.name{
	height: 60px;
	width: 100%;
	margin: 0px;
	line-height: 60px;
	text-align: left;
	font-size: 25px;
	/* background-color: #F0F8FF; */
}
.command{
	width: 65%;
	height: 60px;
	margin: auto;
	/* background-color: #FFAA7F; */
}
.comtitle{
	line-height: 40px;
	margin-left: 10px;
	margin-top: 10px;
	font-size: 20px;
	color: #6b6b6b;
	/* background-color: #ffff7f; */
	display: inline-block;
}
.line{
	height: 1.5px;
	width: 100%;
	margin-left: 10px;
	margin-top: 5px;
	background-color: #d0ced3;
}
.comcont{
	width: 65%;
	height: 300px;
	margin: auto;
	/* background-color: #FFAA7F; */
}
.star{
	width: 300px;
	height: 78%;
	margin-top: 10px;
	margin-left: 10px;
	display: inline-block;
	/* background-color: #E3E3E3; */
}
.all{
	height: 60px;
	width: 240px;
	margin-top: 10px;
	margin-left: 10px;
	/* background-color: #4CAF50; */
}
.allleft{
	height: 60px;
	width: 60px;
	float: left;
	font-size: 40px;
	text-align: center;
	line-height: 60px;
	/* background-color: #FFAA7F; */
	display: inline-block;
}
.allright{
	height: 60px;
	width: 160px;
	margin-left: 15px;
	/* background-color: #ffaa00; */
	display: inline-block;
}
.alltext1{
	height: 25px;
	line-height: 25px;
	margin-top: 5px;
}
.alltext2{
	height: 30px;
	line-height: 30px;
	font-size: 13px;
	color: #004e76;
}
.stars{
	width: 20px;
	margin: 1px;
	display: inline-block;
}
.para{
	height: 150px;
	width: 250px;
	margin-top: 20px;
	margin-left: 20px;
	/* background-color: #DDDDDD; */
}
.parali{
	width: 200px;
	height: 25px;
	/* margin: 5px; */
	/* background-color: #F0F8FF; */
}
.word{
	font-size: 13px;
	display: inline-block;
	vertical-align: middle;
}
.lineblock{
	height: 15px;
	width: 50%;
	margin-left: 10px;
	display: inline-block;
	vertical-align: middle;
	background-color: #ffaa00;
}
.persents{
	margin-left: 5px;
	font-size: 12px;
	vertical-align: middle;
	display: inline-block;
}
.mycom{
	width: 300px;
	height: 30px;
	margin: 0px 10px;
}
.seecom{
	text-align: center;
	width: 80px;
	height: 20px;
	margin: 0px 10px;
	border: solid 1px #E3E3E3;
	border-radius: 5px;
	font-size: 12px;
	line-height: 20px;
	background-color: #ffe37d;
	display: inline-block;
}
.seecom a{
	color: #000000;
	text-decoration: none;
}
.seecom:hover{
	background-color: #ffcc30;
}
.commandcont{
	width: 62%;
	/* height: 500px; */
	/* background-color: #AAA7AD; */
	margin: auto;
}
.conttitle{
	width: 98%;
	margin: auto;
	color: #dd9300;
}
.contunit{
	/* height: 100px; */
	width: 98%;
	margin: auto;
	/* background-color: #F0F8FF; */
}
.line2{
	width: 98%;
	height: 0.5px;
	margin-top: 20px;
	margin-bottom: 10px;
	background-color: #e8e8e8;
}
.contop{
	height: 20px;
	/* background-color: #F0F8FF; */
}
.nickname{
	width: 65px;
	font-size: 13px;
	/* background-color: #DD9300; */
	color: #7d7d7d;
	display: inline-block;
}
.stars2{
	display: inline-block;
	height: 12px;
}
.conbottom{
	margin-top: 6px;
	font-size: 13px;
}
.morerecommend{
	color: #468dd3;
	font-size: 13px;
}
.nomorerecommend{
	color: #468dd3;
	font-size: 13px;
}
.morerecommend:hover{
	color: #3e7fbc;
	text-decoration: underline;
}
.maylike{
	width: 65%;
	height: 300px;
	margin: auto;
	text-align:center;
	/* background-color: #E3E3E3; */
}
.unit{
	height: 225px;
	width: 140px;
	/* background-color: #ffffff; */
	margin: 8px;
	display: inline-block;
}
.imge{
	height: 190PX;
	background-color: #d6d6d6;
}
.iname{
	margin-top: 10px;
	font-size: 13px;
}

</style>
